<!-- 统计 -->
<script setup>
import * as echarts from 'echarts'
import { onMounted } from 'vue'

const img = JSON.parse(localStorage.getItem('course')).courseImage
const courseName = JSON.parse(localStorage.getItem('course')).courseName
const courseTeacher = JSON.parse(localStorage.getItem('course')).teacher

onMounted(() => {
  test(), exam()
})

// 平时测验
const test = () => {
  var chartDom = document.getElementById('main1')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 29, name: '第一章' },
          { value: 19, name: '第二章' },
          { value: 20, name: '第三章' },
          { value: 29, name: '第四章' }
        ]
      }
    ]
  }

  option && myChart.setOption(option)
}

// 考试
const exam = () => {
  var chartDom = document.getElementById('main2')
  var myChart = echarts.init(chartDom)
  var option

  option = {
    xAxis: {
      type: 'category',
      data: ['60-70分', '70-80分', '80-90分', '90-100分']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [15, 25, 40, 20],
        type: 'line'
      }
    ]
  }

  option && myChart.setOption(option)
}
</script>

<template>
  <el-card class="card1">
    <el-image :src="img" style="height: 250px; width: 250px"></el-image>
    <div class="clearfix">
      <span class="float-left">课程名称：{{ courseName }}</span>
      <span class="float-right">教师：{{ courseTeacher }}</span>
    </div>
  </el-card>
  <el-card class="card2"
    ><h3>章节测验</h3>
    <div id="main1"></div
  ></el-card>
  <el-card class="card3">
    <h3>考试</h3>
    <div id="main2"></div
  ></el-card>
</template>

<style lang="scss" scoped>
.card1 {
  margin-top: 6.25rem;
  display: flex;
  height: 250px;
  // flex-direction: row;
  // flex-wrap: wrap;

  .clearfix {
    position: relative;
    top: -150px;
    left: 270px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
}
.card2 {
  margin-top: 30px;
  #main1 {
    width: 100%;
    height: 50vh;
  }
}
.card3 {
  margin-top: 30px;
  #main2 {
    width: 100%;
    height: 50vh;
  }
}
</style>
